<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/6/6
  Time: 上午9:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>批量导入学生数据</title>
    <style>
        /* 美化按钮 */
        input[type="submit"] {
            padding: 10px 20px;
            background-color: #4CAF50; /* 按钮背景颜色 */
            color: white; /* 按钮文本颜色 */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s; /* 按钮颜色过渡效果 */
        }
        input[type="file"]{
            display: inline-block;
            padding: 10px 20px;
            background-color: #008CBA; /* 按钮背景颜色 */
            color: white; /* 按钮文本颜色 */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s; /* 按钮颜色过渡效果 */
        }
        .custom-file-upload:hover {
            background-color: #005f77;
        }
        /* 鼠标悬停时改变按钮颜色 */
        input[type="submit"]:hover {
            background-color: #45a049;
        }

        /* 按钮点击效果 */
        input[type="submit"]:active {
            transform: translateY(1px);
        }



    </style>
</head>
<body>
<h1>批量导入学生数据</h1>
<form action="students/import" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="导入">
</form>
</body>
</html>
<script>
    // 检查文件类型是否为excel文件
    function checkFileType(file) {
        var type = file.type;
        if (type.indexOf("excel") < 0) {
            alert("请上传excel文件！");
            return false;
        }
        return true;
    }

    // 检查文件大小是否超过10M
    function checkFileSize(file) {
        var size = file.size;
        if (size > 10 * 1024 * 1024) {
            alert("文件大小不能超过10M！");
            return false;
        }
        return true;
    }

    // 表单提交前的检查
    function checkForm() {
        var file = $("#file")[0].files[0];
        if (!checkFileType(file) || !checkFileSize(file)) {
            alert("请先选择文件然后再进行导入操作！");
            return false;
        }
        return true;
    }

    // 表单提交前绑定检查函数
    $("#importForm").submit(function(e) {
        if (!checkForm()) {
            e.preventDefault();
            return;
        }
        $(this).find('input[type="submit"]').prop('disabled', true).val("上传中...");

        // 请求上传的接口
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        $.ajax({
            url: "students/import",
            type: "POST",
            enctype: 'multipart/form-data',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                alert("上传成功！");
                $(this).find('input[type="submit"]').prop('disabled', false).val("导入");
            }
        });
    });

</script>
